<template>
  <div id='ground' :style='size'>
    <chart ref='chart1' :options='options' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  import 'echarts/lib/component/visualMap' // 引入visualMap相对应的js文件
  export default {
    name: 'pie',
    data () {
      return {
        dataArry: [
          [
            ['1', 6, 6, '细河区'],
            ['2', 6, 6, '细河区'],
            ['3', 2, 2, '细河区'],
            ['4', 4, 4, '细河区'],
            ['5', 1, 1, '细河区'],
            ['6', 6, 6, '细河区'],
            ['7', 1, 1, '细河区'],
            ['8', 3, 3, '细河区'],
            ['9', 1, 1, '细河区'],
            ['10', 7, 7, '细河区'],
            ['11', 2, 2, '细河区'],
            ['12', 6, 6, '细河区']

          ],

          [
            ['1', 7, 7, '海州区'],
            ['2', 5, 5, '海州区'],
            ['3', 6, 6, '海州区'],
            ['4', 1, 1, '海州区'],
            ['5', 6, 6, '海州区'],
            ['6', 1, 1, '海州区'],
            ['7', 4, 4, '海州区'],
            ['8', 7, 7, '海州区'],
            ['9', 7, 7, '海州区'],
            ['10', 3, 3, '海州区'],
            ['11', 5, 5, '海州区'],
            ['12', 3, 3, '海州区']

          ],

          [
            ['1', 4, 4, '新邱区'],
            ['2', 1, 1, '新邱区'],
            ['3', 1, 1, '新邱区'],
            ['4', 7, 7, '新邱区'],
            ['5', 2, 2, '新邱区'],
            ['6', 2, 2, '新邱区'],
            ['7', 7, 7, '新邱区'],
            ['8', 5, 5, '新邱区'],
            ['9', 5, 5, '新邱区'],
            ['10', 2, 2, '新邱区'],
            ['11', 1, 1, '新邱区'],
            ['12', 2, 2, '新邱区']
          ],

          [
            ['1', 1, 1, '太平区'],
            ['2', 4, 4, '太平区'],
            ['3', 3, 3, '太平区'],
            ['4', 6, 6, '太平区'],
            ['5', 5, 5, '太平区'],
            ['6', 7, 7, '太平区'],
            ['7', 2, 2, '太平区'],
            ['8', 1, 1, '太平区'],
            ['9', 2, 2, '太平区'],
            ['10', 5, 5, '太平区'],
            ['11', 6, 6, '太平区'],
            ['12', 5, 5, '太平区']
          ],

          [
            ['1', 5, 5, '清河门区'],
            ['2', 3, 3, '清河门区'],
            ['3', 7, 7, '清河门区'],
            ['4', 2, 2, '清河门区'],
            ['5', 3, 3, '清河门区'],
            ['6', 4, 4, '清河门区'],
            ['7', 5, 5, '清河门区'],
            ['8', 4, 4, '清河门区'],
            ['9', 4, 4, '清河门区'],
            ['10', 6, 6, '清河门区'],
            ['11', 3, 3, '清河门区'],
            ['12', 4, 4, '清河门区']
          ],

          [
            ['1', 3, 3, '彰武县'],
            ['2', 2, 2, '彰武县'],
            ['3', 4, 4, '彰武县'],
            ['4', 5, 5, '彰武县'],
            ['5', 7, 7, '彰武县'],
            ['6', 3, 3, '彰武县'],
            ['7', 3, 3, '彰武县'],
            ['8', 6, 6, '彰武县'],
            ['9', 6, 4, '彰武县'],
            ['10', 1, 1, '彰武县'],
            ['11', 4, 4, '彰武县'],
            ['12', 7, 7, '彰武县']
          ],

          [
            ['1', 2, 2, '阜新蒙古族自治县'],
            ['2', 7, 7, '阜新蒙古族自治县'],
            ['3', 5, 5, '阜新蒙古族自治县'],
            ['4', 3, 3, '阜新蒙古族自治县'],
            ['5', 4, 4, '阜新蒙古族自治县'],
            ['6', 5, 5, '阜新蒙古族自治县'],
            ['7', 6, 6, '阜新蒙古族自治县'],
            ['8', 2, 2, '阜新蒙古族自治县'],
            ['9', 3, 3, '阜新蒙古族自治县'],
            ['10', 4, 4, '阜新蒙古族自治县'],
            ['11', 7, 7, '阜新蒙古族自治县'],
            ['12', 1, 1, '阜新蒙古族自治县']
          ]
        ],
        options: {},
        size: {
          width: '100%',
          height: '100%'
        },
        unit: '',
        title: ''
      }
    },
    computed: {},
    methods: {
      sizeFunction: function (x) {
        var y = Math.sqrt(x[2] / 3900) + 0.1
        return y * 80
      }
    },
    mounted () {
      this.options = {
        title: {
          top: '0',
          left: 'center',
          text: '20XX年水环境质量区域排名',
          textStyle: {
            align: 'center',
            color: '#FFFFFF',
            fontSize: 15
          }
        },
        grid: {
          top: '28%',
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          name: '月份',
          axisLabel: {
            fontSize: 14,
            color: '#fff'
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: {
          name: '等级',
          axisLabel: {
            fontSize: 14
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        },
        color: ['#8a2be2', '#ff7f50', '#ff00ff', '#ffd700', '#adff2f', '#4169e1', '#FF0000'],
        legend: [
          {
            orient: 'horizontal',
            x: '4%',
            y: '5%',
            align: 'left',
            data: ['细河区'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          },
          {
            orient: 'horizontal',
            x: '22%',
            y: '5%',
            align: 'left',
            data: ['海州区'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          },
          {
            orient: 'horizontal',
            x: '42%',
            y: '5%',
            align: 'left',
            data: ['新邱区'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          },
          {
            orient: 'horizontal',
            x: '62%',
            y: '5%',
            align: 'left',
            data: ['太平区'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          },
          {
            orient: 'horizontal',
            x: '81%',
            y: '5%',
            align: 'left',
            data: ['清河门区'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          }, {
            orient: 'horizontal',
            x: '4%',
            y: '12%',
            align: 'left',
            data: ['彰武县'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          },
          {
            orient: 'horizontal',
            x: '22%',
            y: '12%',
            align: 'left',
            data: ['阜新蒙古族自治县'],
            textStyle: {
              color: '#fff',
              fontSize: '12'
            }
          }
        ],
        // visualMap: [{
        //   show: true,
        //   orient: 'horizontal',
        //   categories: ['细河区', '海州区', '新邱区', '太平区', '清河门区', '彰武县', '阜新蒙古族自治县'],
        //   // formatter: function (params) {
        //   //   if (params.indexOf('\n') == -1) {
        //   //     return params
        //   //   } else {
        //   //     return '{white|' + params.split('\n')[0] + '}\n' + params.split('\n')[1]
        //   //   }
        //   // },
        //   textStyle: {
        //     fontSize: 12,
        //     color: '#fff'
        //   },
        //   right: 0,
        //   left: 0,
        //   top: '6%',
        //   inRange: {
        //     color: (function () {
        //       var colors = ['#8a2be2', '#ff7f50', '#ff00ff', '#ffd700', '#adff2f', '#4169e1', '#FF0000']
        //       return colors.concat(colors)
        //     })()
        //   }
        // }],
        series: [{
          name: '细河区',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[0]
        }, {
          name: '海州区',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            // color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[1]
        }, {
          name: '新邱区',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            // color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[2]
        }, {
          name: '太平区',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            // color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[3]
        }, {
          name: '清河门区',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            // color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[4]
        }, {
          name: '彰武县',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            // color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[5]
        }, {
          name: '阜新蒙古族自治县',
          type: 'scatter',
          symbolSize: this.sizeFunction,
          label: {
            show: false,
            position: 'top',
            fontSize: 10,
            // color: '#000',
            formatter: function (param) {
              return param.data[3]
            }
          },
          data: this.dataArry[6]
        }]
      }
      window.addEventListener('resize', function () {
        this.$refs.chart1.resize()
      })
    }
  }
</script>
<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
